<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Loading....</title>
</head>
<style>
    .other {
        margin: auto;
        margin-top: 100px;
    }

    .box {
        width: 80px;
        height: 80px;
        background: blue;
        border: 6px solid aqua;
        border-color: aqua red;
        border-radius: 50%;
        animation: roate-loading 1.2s linear infinite;
    }

    .box1 {
        width: 80px;
        height: 80px;
        background: transparent;
        border: 6px solid aqua;
        border-color: aqua transparent;
        border-radius: 50%;
        animation: roate-loading 1.2s linear infinite;
    }

    .box2 {
        width: 80px;
        height: 80px;
        background: transparent;
        border: 6px dashed aqua;
        border-color: aqua transparent aqua aqua;
        border-radius: 50%;
        animation: roate-loading 1.2s linear infinite;
    }

    @keyframes roate-loading {
        from {
            rotate: 0deg;
        }

        to {
            rotate: 360deg;
        }
    }
</style>

<body>
    <div class="box other"></div>

    <div class="box1 other"></div>

    <div class="box2 other"></div>
</body>

</html>